<template>
    <div>
        <h3>房号列表</h3>
        <input type="button" value="添加" @click="add">
      
        <input type="button" value="导出" class="btn btn-info"  @click="exportFn">
        <input type="file" @change="importFn">
        <input type="button" class="btn btn-info" value="导入" @click="abc">
        <table class="table table-bordered">
            <tbody>
               <tr>
                    <td>Id</td>
                    <td>房号名称</td>
                    <td>门店</td>
                    <td>房型</td>
                    <td>房态</td>
                    <td>价格</td>
                    <td>操作</td>
               </tr>

               <tr v-for="item in query.list">
                    <td>{{item.Id}}</td>
                    <td>{{item.HouseName}}</td>
                    <td>{{item.ShopName}}</td>
                    <td>{{item.HouseTypeName}}</td>
                    <td>
                        <span v-if="item.HouseState==1">空闲</span>
                        <span v-if="item.HouseState==2">已入住</span>
                        <span v-if="item.HouseState==3">已预约</span>
                    </td>
                    <td>{{ item.Price }}</td>
                    <td>操作</td>
               </tr>
            </tbody>
        </table>
        <span>共<b> {{ query.totalCount }}</b>条</span>
        <span>共 <b>{{ query.totalPage }}</b>页</span>
        <span>每页显示<b>{{ can.pageSize }}</b>条</span>
        <span>当前第<b>{{ can.pageIndex }}</b>页/ <b>{{ query.totalPage }}</b>页</span>
        <select v-model="can.pageSize" @change="show">
            <option :value="item" v-for="item in arr" :key="item">每页{{ item }}条</option>
        </select>
        <input type="button" value="首页" @click="goPage(1)" >
        <input type="button" value="下一页" @click="goPage(can.pageIndex+1)">
        
        <span v-for="item in query.totalPage" @click="goPage(item)">{{ item }}</span>

        <input type="button" value="上一页" @click="goPage(can.pageIndex-1)">
        <input type="button" value="尾页" @click="goPage(query.totalPage)">

        <input type="number" v-model="can.pageIndex">
        <input type="button" value="跳转" @click="goPage(can.pageIndex)">
    </div>
</template>

<script setup lang="ts">
import{ref,reactive,onMounted} from 'vue'
import {useRouter,useRoute} from 'vue-router'
import axios from 'axios';
import moment from 'moment';


const router=useRouter();
const route=useRoute();

const add=()=>{
    router.push('/housenoAdd');
}

onMounted(()=>{
    getlist();
})

let obj=ref();
const importFn=(e:any)=>{
    obj.value=e.target.files[0];


}
//导入
const abc=()=>{
    let f=new FormData();
    f.append('file',obj.value);
    axios({
        method:'post',
        url:'/api/House/ImpotExcel',
        data:f,
    })
    .then(res=>{
        console.log(res);
        if(res.data>0){
            alert("导入成功");
        }
        else{
            alert("导入失败");
            return;
        }
    })
    .catch(err=>{
        console.log(err);
    })
}

const exportFn=()=>{
    location.href=`https://localhost:7035/api/House/ExportExcel?pageIndex=${can.pageIndex}&pageSize=${can.pageSize}&housenoname=${can.housenoname}`
}
const arr=ref([2,4,6,8])
const show=()=>{
    can.pageIndex=1;
    getlist();

}
const goPage=(num:any)=>{
    if(num<1){
        can.pageIndex=1;
        return;
    }
    if(num>query.totalPage)
    {
        can.pageIndex=query.totalPage;
        return;
    }
    can.pageIndex=num;
    getlist();
}
const can=reactive({
    pageIndex:1,
    pageSize:100,
    housenoname:'',
})
const query:any=reactive({
    list:[],
    totalCount:1,
    totalPage:1,
})
const getlist=()=>{
    axios({
        method:'get',
        url:'/api/House/GetHouseNoList',
        params:
        can,
        
    })
    .then(res=>{
        console.log(res);
        query.list=res.data.list
        query.totalCount=res.data.totalCount
        query.totalPage=res.data.totalPage

    })
    .catch(err=>{
        console.log(err);
    })
}
</script>

<style scoped>
input[type=button]{
    margin: 0 20px;
}
</style>